import React, { Component, Suspense } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { Redirect } from 'react-router-dom'
import Routes from './routes'
import { Provider } from 'react-redux'
import store from '../redux/reduers'
import Loadding from '../pages/loadding'
export default class router extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <Suspense fallback={<Loadding></Loadding>} >
                        <Switch>
                            {
                                Routes.map(({ component: Component, children, auth, ...set }, key) => {
                                    if (!children) {
                                        return <Route {...set} key={key} render={(props) => {
                                            if (auth) {
                                                const token = localStorage.getItem('redtoken')
                                                if (token) {
                                                    return <Component {...props} ></Component>
                                                } else {
                                                    return <Redirect to="/" ></Redirect>
                                                }
                                            } else {
                                                return <Component {...props} ></Component>
                                            }
                                        }} ></Route>
                                    } else {
                                        return <Route {...set} key={key} render={(props) => {
                                            if (auth) {
                                                const token = localStorage.getItem('redtoken')
                                                if (token) {
                                                    return <Component {...props} children={
                                                        <Switch>
                                                            {children.map(({ component: Component, ...set1 }, key2) => {
                                                                return <Route render={
                                                                    (props) => {
                                                                        return <Component {...props} ></Component>
                                                                    }
                                                                } {...set1} key={key2}></Route>
                                                            })}
                                                        </Switch>
                                                    }  ></Component>
                                                } else {
                                                    return <Redirect to="/" ></Redirect>
                                                }
                                            } else {
                                                return <Component {...props} children={
                                                    <Switch>
                                                        {children.map(({ component: Component, ...set1 }, key2) => {
                                                            return <Route render={
                                                                (props) => {
                                                                    return <Component {...props} ></Component>
                                                                }
                                                            } {...set1} key={key2}></Route>
                                                        })}
                                                    </Switch>
                                                } ></Component>
                                            }
                                        }} />
                                    }
                                })
                            }
                        </Switch>
                    </Suspense>
                </Router>
            </Provider>
        )
    }
}
